<template>
  <t-table
    maxHeight="750px"
    :loading="loading"
    row-key="index"
    :data="data"
    :columns="props.columns"
    :table-content-width="'100%'"
    :resizable="false"
  >
    <!-- <template #title-slot-name>
      <t-popup class="placement top center" placement="top" show-arrow destroy-on-close>
        <template #content class="background: rgba(0, 0, 0, 0.9);">
          <div class="pop-box">
            <div class="title-box" v-for="item in roleInfo" :key="item.name">
              <span class="title1">{{ item.name }}</span>
              <span class="title1">{{ item.title }}</span>
            </div>
          </div>
        </template>
        <div style="display: flex; align-items: center; color: rgba(0, 0, 0, 0.26)">
          项目角色
          <t-icon name="help-circle" style="margin-left: 5px" />
        </div>
      </t-popup>
    </template> -->
    <template #empty v-if="props.tabValue !== 0 || props.tabValue !== -1">
      <div class="hw-flex-style-c-c-c hw-box-style-flex-clm null-box-style">
        <img class="null-img-1" src="../../../../assets/img/null2.png" alt="" />
        <span class="null-title-1">暂无成员</span>
        <span class="null-title-2">快去添加成员吧</span>
      </div>
    </template>
    <template #name="{ row }">
      <div class="hw-box-style-flex hw-box-style-flex-r-center">
        <t-avatar
          size="24px"
          v-if="row.coverUrl"
          style="margin-right: 15px"
          :image="urls + row.coverUrl + webUrls"
        ></t-avatar>
        <t-avatar
          size="24px"
          style="margin-right: 15px"
          v-else
          image="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/userImg.png"
        ></t-avatar>
        <div class="hw-box-style-flex hw-box-style-flex-clm">
          <div class="title-1">
            {{ row.name }}
            <!-- <div v-if="row.isOneself" class="my-style hw-flex-style-c-c">我</div> -->
          </div>
        </div>
      </div>
    </template>
    <template #email="{ row }">
      <div>{{ row.email ? row.email : '-' }}</div>
    </template>
    <template #role="{ row }">
      <div v-if="row.auditStatus === 1" class="row-role row-role-4">未审核</div>
      <div v-else>
        <!-- <div v-if="row.role !== 1">
          <div
            v-if="props.role !== 1"
            class="row-role"
            :class="{ 'row-role-1': row.role == 1, 'row-role-2': row.role == 2, 'row-role-3': row.role == 3 }"
          >
            {{ row.role == 1 ? '管理员' : row.role == 2 ? '参与人' : '查看人' }}
            
          </div>
          <t-popup v-else :overlay-style="{ width: '160px' }" destroy-on-close trigger="click" placement="bottom">
            <template #content>
              <div class="pop-box">
                <div class="pop-item hw-click-cursor" @click="setRoles(2, row.userId)">设为参与人</div>
                <div class="pop-item hw-click-cursor" @click="setRoles(3, row.userId)">设为查看人</div>
              </div>
            </template>
            <div
              class="row-role"
              :class="{ 'row-role-1': row.role == 1, 'row-role-2': row.role == 2, 'row-role-3': row.role == 3 }"
            >
              {{ row.role == 1 ? '管理员' : '参与人' }}
              <t-icon size="16px" name="chevron-down" color="#fff" style="color: #fff; margin-left: 5px" />
            </div>
          </t-popup> 
        </div> -->
        <div>
          <div
            class="row-role"
            :class="{ 'row-role-1': row.role == 1, 'row-role-2': row.role == 2, 'row-role-3': row.role == 3 }"
          >
            {{ row.role == 1 ? '创建者' : '参与人' }}
            <!-- <t-icon size="16px" name="chevron-down" color="#fff" style="color: #fff; margin-left: 5px" /> -->
          </div>
        </div>
      </div>
    </template>
    <template #userId="{ row }">
      <div class="operation-box hw-flex-style-c-c">
        <span v-if="row.auditStatus === 1" class="hw-click-cursor" @click="setStatus(row.userId)">审核</span>
        <span
          v-if="!row.isOneself"
          class="hw-click-cursor"
          @click="del(row.userId)"
          :class="{ 'del-role': props.role !== 1 }"
          >移除</span
        >
      </div>
    </template>
  </t-table>
  <messageModel
    submitText="删除"
    title="提示"
    :visible="visible1"
    problem="确定删除此成员？"
    message="删除后需要将从项目中移除"
    @closeClick="closeClick"
    @submitClick="submitClick"
  />
</template>

<script setup lang="ts">
// @ts-nocheck
import messageModel from '@/components/messageModel/index.vue';
import { roleInfo } from './data';
import { MessagePlugin } from 'tdesign-vue-next';
import { urls } from '@/utils/request/upload';
import { members, setrole, delUser, auditMember } from '@/api/project/project';
import { reactive, ref, watch, defineExpose, nextTick } from 'vue';

const webUrls: string = '?imageView2/1/w/48/h/48/format/webp';
const props = defineProps({
  listMembers: {
    type: Array,
  },
  columns: {
    type: Array,
  },
  projectId: {
    type: Number,
  },
  tabValue: {
    type: Number,
  },
  role: {
    type: Number,
  },
});
const data = ref([]);
const total = ref(0);
const delId = ref(0);
const visible1 = ref(false);
const loading = ref(false);

const init = async (e?: String) => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res;
    if (e) {
      res = await members(props.projectId, props.tabValue, e);
    } else {
      res = await members(props.projectId, props.tabValue);
    }

    data.value = res.data;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const closeClick = () => {
  visible1.value = false;
};
const submitClick = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;

    let res = await delUser(localStorage.getItem('projectId'), delId.value);
    if (res.statusCode == 200) {
      MessagePlugin.success('删除成功');
      nextTick(() => {
        init();
      });
    }
    // http://localhost:8880/#/Invite?sid=381599720243269
    loading.value = false;
    visible1.value = false;
  } catch (err) {
    console.log(err);
    loading.value = false;
  }
};
const del = async (e) => {
  delId.value = e;
  visible1.value = true;
};
const setStatus = async (e) => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    console.log(e);
    let res = await auditMember(localStorage.getItem('projectId'), e);
    if (res.statusCode == 200) {
      MessagePlugin.success('审核成功');
      nextTick(() => {
        init();
      });
    }
    // http://localhost:8880/#/Invite?sid=381599720243269
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const setRoles = async (type: number, userId: number) => {
  try {
    let res = await setrole(localStorage.getItem('projectId'), userId, type);
    if (res.statusCode == 200) {
      MessagePlugin.success('角色分配成功');
      init();
    }
  } catch {}
};
watch(
  () => props.tabValue,
  (newVal, oldVal) => {
    init();
  },
  { deep: true },
);

init();
defineExpose({
  init,
});
</script>

<style lang="less" scoped>
@import '../../../company/index.less';
.operation-box {
  justify-content: center;
  width: 100%;
  .del-role {
    color: @color-text-color2;
  }
}
.row-role {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;

  border-radius: 4px;
}
.row-role-1 {
  background: @color-text-color;
  color: #fff;

  border: 3px;
}
.row-role-2 {
  background: #f1eceb;

  color: rgba(0, 0, 0, 0.38);

  border: 3px;
}
.row-role-3 {
  background: #f1eceb;

  color: rgba(0, 0, 0, 0.38);

  border: 3px;
}
.row-role-4 {
  color: @color-text-color;
  // color: rgba(0, 0, 0, 0.38);
}

.title-box {
  display: flex;
  flex-direction: column;
}
.title1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  line-height: 20px;
}
.operation-box {
  justify-content: flex-end;
}
:deep(.t-table__th-userId) {
  justify-content: flex-end;
  .t-table__th-cell-inner {
    justify-content: flex-end;
  }
}
:deep(.t-table__body td) {
  min-height: 48px;
  padding: 12px;
}
:deep(.t-table__empty) {
  border-bottom: none;
}
</style>
